/* stylelint-disable selector-class-pattern */
@include b(screen-portlet) {
  position: relative;
  width: 100%;
  height: 100%;
  @include when('full-icon') {
    .#{bem(portlet-layout-header)} {
      position: relative;
    }

    .#{bem(portlet-layout-header, left)} {
      position: unset;
    }

    .#{bem(portlet-layout, caption)} {
      max-width: 100%;

      &::before {
        display: none;
      }
    }

    .#{bem(portlet-layout, caption-icon)} {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
    }
    .#{bem(portlet-layout, caption-text)} {
      position: relative;
    }
  }

  @include when(container) {
    position: relative;

    >.ibiz-portlet-layout {
      >.ibiz-portlet-layout-header {
        display: none;
      }
    }
    >.#{bem(icon)} {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
    }

    .ibiz-screen-portlet.is-container {
      z-index: 9;
    }
  }

  @include e(body-image) {
    position: absolute;
    top: 50px;
    z-index: -1;
    width: 100%;
    height: calc(100% - 50px);
  }
}

@include b('custom-border') {
  @include e('content') {
    position: relative;
    width: 100%;
    height: 100%;
  }
  @include when(full-border) {
    > svg {
      transform: translateY(50px);
    }

    &.is-style-1 {
      .#{bem(custom-border,left-top)} {
        transform: translateY(50px);
      }

      .#{bem(custom-border,right-top)} {
        transform: translateY(50px) rotateY(180deg);
      }

      .#{bem(custom-border,left-bottom)} {
        transform: translateY(50px) rotateX(180deg);
      }

      .#{bem(custom-border,right-bottom)} {
        transform: translateY(50px) rotateX(180deg) rotateY(180deg);
      }
    }

    &.is-style-10 {
      .#{bem(custom-border,wrapper)} {
        transform: translateY(50px);
      }
      .#{bem(custom-border,mask)} {
        transform: translateY(50px);
      }
    }

    &.is-style-11 {
      > svg {
        transform: translateY(0);
      }
      .#{bem(portlet-layout-header,left)} {
        position: absolute;
        top: 12%;
        left: 49%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
